<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>excel导入</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择要操作的两个excel文件</button>
    <div class="layui-upload-list" style="max-width: 1000px;">
        <table class="layui-table">
            <colgroup>
                <col>
                <col width="150">
                <col width="260">
                <col width="150">
            </colgroup>
            <thead>
            <tr>
                <th>文件名</th>
                <th>大小</th>
                <th>上传进度</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="demoList"></tbody>
        </table>
    </div>
    <form class="layui-form" lay-filter="form">
        <div class="layui-form-item">
            <label class="layui-form-label">唯一标识表头</label>
            <div class="layui-input-block">
                <input id="parentParam" type="text" name="parentParam" lay-verify="title" autocomplete="off"
                       placeholder="请输入唯一标识表头" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">要填充的表头</label>
            <div class="layui-input-block">
                <input type="text" name="childParams" lay-verify="title" autocomplete="off" placeholder="请输入填充表头以英文逗号分隔"
                       class="layui-input">
            </div>
        </div>
        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
    </form>
</div>
</body>

<script th:src="@{/js/layui.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    var files;
    layui.use(['upload', 'layer', 'form'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , layer = layui.layer
            , form = layui.form;
        //多文件列表示例
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , accept: 'file'
            , number: 2
            , exts: "xls" | "xlsx"
            , multiple: true
            , auto: false
            , choose: function (obj) {
                files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
        });
        $("#testListAction").on("click", function () {
            var input = document.querySelector("#testListAction")
            var url = "/excelImport";
            var formData = new FormData();
            for (let i in files) {
                formData.append("files", files[i]);
            }
            formData.append('childParams', form.val("form").childParams)
            formData.append('parentParam', form.val("form").parentParam)
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url);
            xhr.send(formData);
            xhr.responseType = "blob"; // 返回类型blob
            xhr.onload = function () {
                if (this.status === 200) {
                    let a = document.createElement("a");
                    let blob = new Blob([this.response], {
                        type: "text/csv;charset=GBK;"
                    });
                    let objectUrl = URL.createObjectURL(blob);
                    a.setAttribute("href", objectUrl);
                    a.setAttribute("download", '正常工资薪金所得.xls');
                    a.click();
                } else {
                    alert("上传失败！");
                }
            };
        });

    });

</script>